<template>
  <div class="info_content">
    <div class="line">
      <span @click="goBack">返回上一页 >></span>
    </div>
    <div class="new_lists">
      <div class="news_bank" v-for="list in detail">
        <div class="bank_img">
          <div v-if="list.files">
            <img :src="_filterObj(list.files)" :lazy="lazyImage">
          </div>
          <div v-else>
            <img :src="imgUrl" alt="">
          </div>
        </div>
        <div class="bank_content">
          <p class="ellipsi">{{list.title}}</p>
          <p class="ellipsis" v-html="$options.filters.deleteImgSting(list.content)">{{list.content}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  @import "~common/sass/mixin.scss";
  .info_content {
    padding-bottom: 20%;
  }

  .line {
    height: 36px;
    background: rgba(231, 231, 231, 0.2);
    border-bottom: 1px solid rgba(221, 221, 221, 0.5);
    width: 100%;
    text-align: right;
  }

  .line span {
    font-size: 12px;
    color: #777;
    line-height: 36px;
    cursor: pointer;
    margin-right: 15px;
  }

  .new_lists {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 20%;
    .news_bank {
      width: 100%;
      height: 140px;
      border-bottom: 1px dotted #777777;
      padding-top: 20px;
      padding-bottom: 20px;
      .bank_img{
        width: 25%;
        height: 130px;
        float: left;
        margin-left: 5px;
        img{
          width: 100%;
          height: 110px;
        }
      }
      .bank_content{
        width:70%;
        float: left;
        margin-left: 5px;
        .ellipsi {
          @include ellipsis(1);
          font-size: 14px;
          /*margin-top: 5px;*/
        }
        .ellipsis {
          font-size: 12px;
          @include ellipsis(4);
          text-align: left;
        }
      }
    }
  }

</style>
<script>
  import {getGroupData} from '../../http/article'
  import {filterObj} from 'common/js/filterObj'

  export default {
    name: 'casedetail',
    data() {
      return {
        detail: [],
        lazyImage: require('./image/new.png'),
        imgUrl: require('./image/new.png')
      }
    },
    created() {
      let zone = this.$route.params.zone
      this._getGroupData(zone)
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      _getGroupData(tag) {
        getGroupData(tag).then((res) => {
          this.detail = res.data
        })
      },
      _filterObj(obj) {
        return filterObj(obj)[0].url
      }
    }
  }
</script>
